<div class="f-navForm">
    <div class="f-navForm-header">
        <div class="f-navForm-recommand" (click)="showRecommandData()">
            <div
                [ngClass]="{'f-navForm-recommand-text-focus':chooseRecommand,'f-navForm-recommand-text':!chooseRecommand}">
                推荐</div>
        </div>
        <div class="f-navForm-allData" (click)="showAllData()">
            <div [ngClass]="{'f-navForm-allData-text-focus':!chooseRecommand,'f-navForm-allData-text':chooseRecommand}">
                全部</div>
        </div>
        <div class="f-navForm-remainder">
            <div class="f-navForm-search">
                <input-group [groupText]="groupIcon" [(value)]="searchValue"
                    (clickHandle)="onSearchValueChanged($event)" (valueChange)="onSearchValueChanged($event)"
                    (clear)="onClear()" placeholder="请输入名称/编号搜索" style="font-size:2px;"></input-group>
            </div>
        </div>
    </div>
    <!-- 推荐-BO元数据 -->
    <div class="f-navForm-content" *ngIf="chooseRecommand">
        <div *ngFor="let formDataItem of (supportPaging ? (formData | paginate: paginationOptions) : formData)">
            <ng-container *ngIf="!formDataItem.hide">
                <div [ngClass]="{'f-navForm-item':!formDataItem.active,'f-navForm-item-active':formDataItem.active}"
                    (click)="getFormDataItem(formDataItem)">
                    <div class="f-navForm-leftIcon">
                        <div class="f-navForm-itemIcon">
                            <div class="f-icon f-icon-engineering" style="color:white;font-size: 24px;margin: 8px;">
                            </div>
                        </div>
                    </div>
                    <div class="f-navForm-rightText">
                        <div class="f-navForm-name" [title]="formDataItem.label">{{formDataItem.name}}
                            ({{formDataItem.label}})</div>
                        <div class="f-navForm-source" [title]="formDataItem.source">{{formDataItem.source}}</div>
                    </div>
                </div>
            </ng-container>
        </div>
        <div *ngIf="supportPaging" class="f-navForm-content-paging">
            <pagination-controls #pager [id]="paginationOptions?.id" [maxSize]="pagerLabelSize" [directionLinks]="true"
                [autoHide]="false" [responsive]="true" [previousLabel]="' '" [nextLabel]="' '"
                [showPageInfo]="showPageInfo" [showPageNumber]="showPageNumber" [showPageList]="showPageList"
                (pageChange)="onPageChange($event)">
            </pagination-controls>
        </div>
    </div>
    <!-- 推荐没有数据时的显示内容-->
    <div class="f-navForm-content1"
        style="width: 100%; min-width: 400px; height: 50%; display: flex;justify-content: center;align-items: center;"
        *ngIf="chooseRecommand && noRecommandData">
        <div> 未查询到符合条件的数据 </div>
    </div>
    <!-- 全部 -->
    <div class="f-navForm-content" *ngIf="!chooseRecommand">
        <div *ngFor="let formDataItem of (supportPaging ? (formData | paginate: paginationOptions) : formData)">
            <ng-container *ngIf="!formDataItem.hide">
                <div [ngClass]="{'f-navForm-item':!formDataItem.active,'f-navForm-item-active':formDataItem.active}"
                    (click)="getFormDataItem(formDataItem)">
                    <div class="f-navForm-leftIcon">
                        <div class="f-navForm-itemIcon">
                            <div class="f-icon f-icon-engineering" style="color:white;font-size: 24px;margin: 8px;">
                            </div>
                        </div>
                    </div>
                    <div class="f-navForm-rightText">
                        <div class="f-navForm-name" [title]="formDataItem.label">{{formDataItem.name}}
                            ({{formDataItem.label}})</div>
                        <div class="f-navForm-source" [title]="formDataItem.source">{{formDataItem.source}}</div>
                    </div>
                </div>
            </ng-container>
        </div>
        <div *ngIf="supportPaging" class="f-navForm-content-paging">
            <pagination-controls #pager [id]="paginationOptions?.id" [maxSize]="pagerLabelSize" [directionLinks]="true"
                [autoHide]="false" [responsive]="true" [previousLabel]="' '" [nextLabel]="' '"
                [showPageInfo]="showPageInfo" [showPageNumber]="showPageNumber" [showPageList]="showPageList"
                (pageChange)="onPageChange($event)">
            </pagination-controls>
        </div>
    </div>
    <!-- 全部没有数据时的显示内容-->
    <div class="f-navForm-content1"
        style="width: 100%; min-width: 400px; height: 50%; display: flex;justify-content: center;align-items: center;"
        *ngIf="!chooseRecommand && noAllData">
        <div> 未查询到符合条件的数据 </div>
    </div>
</div>
<ng-template #footer>
    <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
    <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>